<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('人员授权')">
	<meta charset="UTF-8">
</head>
<body>
<div id="dataDiv" style="width: 94%; margin-left: 3%;">
	<div style="width: 100%;">
		<div style="width: 100%; float: left; line-height: 30px; border-bottom: solid 1px;">
			<font style="font-weight: 700;">部门基本信息</font>
		</div>
		<div style="width: 100%; font-family: '宋体'; font-size: 18px;">
			<div style="width: 100%; float: left;">
				<div style="width: 200px; float: left; line-height: 30px;"><font>人员唯一标识:</font></div>
				<div style="float: left; line-height: 30px;"><font>{{modelData.id}}</font></div>
			</div>
			<div style="width: 100%; float: left; margin-top: 8px;">
				<div style="width: 200px; float: left; line-height: 30px;"><font>人员名称:</font></div>
				<div style="float: left; line-height: 30px;"><font>{{modelData.name}}</font></div>
			</div>
			<div style="width: 100%; float: left; margin-top: 8px;">
				<div style="width: 200px; float: left; line-height: 30px;"><font>人员名称（英文）:</font></div>
				<div style="float: left; line-height: 30px;"><font>{{modelData.enName}}</font></div>
			</div>
		</div>
	</div>
	<div class="listDataTableStyle" style="margin-top: 10px;">
		<table style="width: 100%;">
			<thead>
			<tr>
				<th>序号</th>
				<th>选择</th>
				<th>角色唯一标识</th>
				<th>角色名称</th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="(data, index) in roleSelectList" v-show="roleSelectList != null && roleSelectList.length != 0">
				<td>{{index + 1}}</td>
				<td><input type="checkbox" v-model="data.use"></td>
				<td>{{data.id}}</td>
				<td>{{data.name}}</td>
			</tr>
			<tr v-show="roleSelectList == null || roleSelectList.length == 0">
				<td colspan="3">暂无角色</td>
			</tr>
			</tbody>
		</table>
	</div>
	<div style="width: 100%; text-align: center; margin-top: 10px;">
		<button class="btn btn-warning" style="width: 120px;" @click="authorize">授权</button>
	</div>
</div>
<!-- js引入 -->
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript">
/*<![CDATA[*/
const id = '[[${personId}]]';
const orgId = '[[${orgId}]]';
const BASE_PATH = '[[@{/}]]';
/*]]>*/
const URLS = {
	API_URLS: {
		GET: BASE_PATH + 'v1/restful/person/getWithRoles/'+id,
		GET_ROLES: BASE_PATH + 'v1/restful/role/getRolesByOrgId?orgId='+orgId,
		SAVE: BASE_PATH + 'v1/restful/person/update'
	}
};
var reqLayerIndex = -1;
axios.interceptors.request.use(function (config) {
	reqLayerIndex = layer.load();
	return config;
}, function (error) {
	return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
	layer.close(reqLayerIndex);
	return response;
}, function (error) {
	return Promise.reject(error.response);
});
var app = new Vue({
	el: '#dataDiv',
	data: {
		modelData: {},
		roleList: []
	},
	methods: {
		init: function() {
			axios.get(URLS.API_URLS.GET)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					app.modelData = data;
				}
			}).catch(function (error) {
			});
			axios.get(URLS.API_URLS.GET_ROLES)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					app.roleList = data;
				}
			}).catch(function (error) {
			});
		},
		authorize: function() {
			let model = this.roleSelectList;
			let roleArr = [];
			for (var i = 0, len = model.length; i < len; i++) {
				if (model[i].use) {
					roleArr.push({id: model[i].id});
				}
			}
			let saveModel = this.modelData;
			saveModel.roleDtos = roleArr;
			axios.post(URLS.API_URLS.SAVE, saveModel)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					layer.alert('保存成功', function(i) {
						layer.close(i);
						let index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					})
				} else {
					layer.alert(data.message);
				}
			}).catch(function (error) {
			});
		}
	},
	mounted: function() {
		this.init();
	},
	computed: {
		roleSelectList: function() {
			let arr = [];
			if (this.roleList == null || this.roleList.length == 0) {
				return [];
			}
			let tmpArr = this.roleList;
			let tmpModelData = this.modelData;
			let roleDtos = tmpModelData.roleDtos;
			console.log(roleDtos)
			if (roleDtos == null || roleDtos.length == 0) {
				for (var i = 0, len = tmpArr.length; i < len; i++) {
					tmpArr[i].use = false;
				}
			} else {
				for (var i = 0, len = tmpArr.length; i < len; i++) {
					tmpArr[i].use = false;
					for (var j = 0, jLen = roleDtos.length; j < jLen; j++) {
						if (tmpArr[i].id == roleDtos[j].id) {
							tmpArr[i].use = true;
						}
					}
				}
			}
			return tmpArr;
		}
	}
});
</script>
</html>